<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>办理退房</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <style>
        body { font-family: Arial; background: #f5f5f5; }
        .container { max-width: 600px; margin: 40px auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 10px #ccc; padding: 30px; }
        .title { text-align: center; font-size: 26px; margin-bottom: 24px; color: #333; }
        .form-group { margin-bottom: 18px; }
        .form-group label { display: block; margin-bottom: 6px; color: #333; font-weight: 500; }
        .form-group input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
        .btn { width: 100%; padding: 12px; background: #5a3ec8; color: #fff; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; }
        .btn:hover { background: #764ba2; }
        .info-box { background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 6px; padding: 12px 16px; margin-bottom: 16px; }
        .result { margin-top: 18px; text-align: center; font-size: 16px; }
        .success { color: #28a745; }
        .error { color: #e74c3c; }
    </style>
</head>
<body class="main-bg">
  <div class="main-card">
    <a href="adminindex.html" class="back-home-btn">返回首页</a>
    <h2 class="main-title">办理退房</h2>
    <div class="form-group">
      <label>房号：</label>
      <input type="text" id="roomNumber" placeholder="请输入房号">
    </div>
    <button class="main-btn" id="searchBtn">查询入住情况</button>
    <div class="info-box" id="orderInfo" style="display:none;"></div>
    <button class="main-btn" id="checkoutBtn" style="display:none;">办理退房</button>
    <div class="result" id="resultMsg"></div>
  </div>
  <script>
        let currentOrder = null;
        // 查询入住情况
        $('#searchBtn').on('click', function() {
            const roomNumber = $('#roomNumber').val().trim();
            $('#resultMsg').text('');
            $('#orderInfo').hide();
            $('#checkoutBtn').hide();
            currentOrder = null;
            if (!roomNumber) {
                $('#resultMsg').text('请输入房号').addClass('error');
                return;
            }
            $.ajax({
                url: 'http://localhost:8080/api/order/checkedinOrder',
                type: 'GET',
                data: { roomNumber: roomNumber },
                success: function(order) {
                    if (!order || !order.orderId) {
                        $('#orderInfo').html('<div class="error">未查询到该房号的入住订单</div>').show();
                        $('#checkoutBtn').hide();
                        return;
                    }
                    let html = `<b>入住人：</b>${order.username || ''}<br>
                        <b>联系方式：</b>${order.contactPhone || ''}<br>
                        <b>入住时间：</b>${order.checkInTime || ''}<br>
                        <b>房型ID：</b>${order.roomTypeId || ''}<br>
                        <b>订单号：</b>${order.orderId || ''}`;
                    $('#orderInfo').html(html).show();
                    $('#checkoutBtn').show();
                    currentOrder = order;
                },
                error: function() {
                    $('#orderInfo').html('<div class="error">查询失败，请重试</div>').show();
                    $('#checkoutBtn').hide();
                }
            });
        });
        // 办理退房
        $('#checkoutBtn').on('click', function() {
            if (!currentOrder) {
                $('#resultMsg').text('请先查询并选择入住订单').addClass('error');
                return;
            }
            $('#resultMsg').text('');
            $.ajax({
                url: 'http://localhost:8080/api/order/checkout',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ roomNumber: currentOrder.roomNumber }),
                success: function(res) {
                    if (res === 'success') {
                        $('#resultMsg').text('退房成功，房间已设为打扫中！').removeClass('error').addClass('success');
                        $('#orderInfo').hide();
                        $('#checkoutBtn').hide();
                    } else {
                        $('#resultMsg').text('退房失败，请确认房号和入住状态').removeClass('success').addClass('error');
                    }
                },
                error: function() {
                    $('#resultMsg').text('请求失败，请稍后重试').removeClass('success').addClass('error');
                }
            });
        });
    </script>
    <style>
    .main-bg {
      min-height: 100vh;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 0;
      margin: 0;
    }
    .main-card {
      background: #fff;
      border-radius: 24px;
      box-shadow: 0 8px 32px rgba(90,62,200,0.12);
      max-width: 600px;
      margin: 60px auto 0 auto;
      padding: 40px 32px 32px 32px;
    }
    .main-title {
      font-size: 28px;
      font-weight: 800;
      color: #5a3ec8;
      margin-bottom: 18px;
      letter-spacing: 1px;
      text-align: center;
    }
    .form-group {
      margin-bottom: 18px;
    }
    .form-group label {
      display: block;
      margin-bottom: 6px;
      color: #333;
      font-weight: 500;
    }
    .form-group input {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 15px;
    }
    .main-btn {
      width: 100%;
      padding: 12px;
      background: linear-gradient(90deg, #764ba2 0%, #667eea 100%);
      color: #fff;
      border: none;
      border-radius: 16px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      margin-bottom: 10px;
      transition: background 0.2s, box-shadow 0.2s;
      box-shadow: 0 2px 8px #e0d7f7;
    }
    .main-btn:hover {
      background: linear-gradient(90deg, #a18cd1 0%, #fbc2eb 100%);
      color: #5a3ec8;
    }
    .info-box {
      background: #f8f9fa;
      border: 1.5px solid #e0e0e0;
      border-radius: 10px;
      padding: 14px 16px;
      margin-bottom: 16px;
      font-size: 15px;
    }
    .result {
      margin-top: 18px;
      text-align: center;
      font-size: 16px;
    }
    .success { color: #28a745; }
    .error { color: #e74c3c; }
    .back-home-btn {
      display: inline-block;
      margin: 0 0 18px 0;
      background: #f5f5f5;
      color: #5a3ec8;
      border: none;
      border-radius: 18px;
      padding: 8px 28px;
      font-size: 16px;
      font-weight: 500;
      text-decoration: none;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
      box-shadow: 0 2px 8px #e0d7f7;
    }
    .back-home-btn:hover {
      background: #e0e7ff;
      color: #333;
    }
    @media (max-width: 700px) {
      .main-card { padding: 18px 4vw; }
      .main-title { font-size: 20px; }
      .form-group input { font-size: 14px; }
    }
  </style>
</body>
</html> 